<template>
	<view class="detail_pullup isbottom" :style="'margin-top:' + mydata.mt + 'px; background:' + mydata.bg">
		<view class="tab" :style="'background:' + mydata.bg">
			<p @click="tab_id = 1" class="item"><span class="_span detail" :class="tab_id == 1 ? 'active' : ''">详情</span></p>
			<p @click="tab_id = 2" class="item"><span class="_span params" :class="tab_id == 2 ? 'active' : ''">参数</span></p>
		</view>
		<view class="body" :style="'background:' + mydata.bg">
			<view class="detail" v-if="tab_id == 1 && details">
			<u-parse  :domain="baseUrl" :html="details.content" :show-with-animation="true"></u-parse></view>
			<view class="params _ul" v-if="tab_id == 2">
				<view class="_li" v-for="(item, i) in parameter" :key="i">
					<text class="key">{{ item.key }}</text>
					<text class="value">{{ item.value }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js'
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			parameter: [],
			nodes: [],
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
			// baseUrl:''
		};
	},
	computed: {
		parameter() {
			if (this.details && this.details.parameter) {
				return JSON.parse(this.details.parameter);
			} else {
				return [];
			}
		},
		baseUrl() {
			return util.geturl(base.baseUrl)
		},
		...mapState({
			details: state => state.details,
			oss: state => state.oss
		})
	},
	created() {
	},
	data() {
		return {
			tab_id: 1
		};
	}
};
</script>

<style lang="scss" scoped>
.detail_pullup {
	box-sizing: border-box;
	overflow: hidden;
	.tab {
		width: 100%;
		height: 40px;
		display: flex;
		flex-wrap: nowrap;
		border-bottom: 0.5px solid #e6e7eb;
		justify-content: center;
		.item {
			height: 100%;
			width: 50%;
			display: flex;
			justify-content: center;
			._span {
				display: inline-block;
				height: 100%;
				text-align: center;
				justify-content: center;
				position: relative;
				font-size: 14px;
				color: #565656;
				position: relative;
				display: flex;
				flex-direction: column;
				&.active {
					font-size: 16px;
					font-weight: bold;
					color: #212121;
					&::after {
						content: '';
						position: absolute;
						width: 100%;
						height: 2px;
						background: #ff3c29;
						bottom: 0;
						left: 0;
						right: 0;
						border-radius: 3px;
					}
				}
			}
		}
	}
	.body {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: #fff;
		overflow: hidden;
		padding: 16px 0;
		.detail {
			padding: 0;
			.detail_img {
				width: 100%;
			}
		}
		.params {
			display: flex;
			flex-direction: column;
			width: 351px;
			margin: auto;
			border-top: 0.5px solid #e6e7eb;
			._li {
				display: flex;
				flex-wrap: nowrap;
				width: 100%;
				min-height: 40px;
				border-right: 0.5px solid #e6e7eb;
				border-bottom: 0.5px solid #e6e7eb;
				border-left: 0.5px solid #e6e7eb;
				.key {
					width: 106px;
					-ms-flex-negative: 0;
					flex-shrink: 0;
					border-right: 0.5px solid #e6e7eb;
					font-size: 12px;
					line-height: 17px;
					color: #969696;
					padding: 12px;
				}
				.value {
					flex: 1;
					font-size: 12px;
					line-height: 17px;
					color: #212121;
					padding: 12px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					overflow: hidden;
					word-break: break-all;
				}
			}
		}
	}
}
</style>
